import { claimDetail, exportClaimDetail } from '@/api/company'
import type { ClaimDto, ClaimItemDto } from '@/api/company/types'
import TableRender, { type TableRenderColumnTypes } from '@/render/TableRender'
import type { AnyObject } from '@/types'
import { Component, Emit, Prop, Watch } from 'vue-facing-decorator'
import type { VxeColumnSlotTypes, VxeGridProps, VxeGridPropTypes, VxeTableDataRow } from 'vxe-table'
import toNative from '@/utils/toNative'
import { editPeriodStatus, editWesureStatus } from '@/api/customer'
import { confirm, downloadFile } from '@/utils/util'
import Dialog from '@/components/dialog/Index'
import { Button } from 'ant-design-vue'

@Component
export class DialogClaimRate extends TableRender {
    @Prop() companyId!: number
    @Prop() show!: boolean

    showDialog = false
    noTablePadding = true

    companyName = ''

    @Emit('update:show')
    updateShow(val: boolean) {
        return val
    }

    @Watch('show', { immediate: true })
    handleWatchShow() {
        this.showDialog = this.show
        if (this.showDialog) {
            this.getData()
        }
    }

    @Watch('showDialog', { immediate: true })
    handleWatchShowDialog() {
        this.updateShow(this.showDialog)
    }

    tableConfig() {
        const config = super.tableConfig()
        config.height = '200px'
        return config
    }

    tableColumnConfigOld = () => [
        {
            field: 'insureTypeName',
            title: '保险类型'
        },
        {
            field: 'finalAmount',
            title: '案件总数'
        },
        {
            field: 'finalMoney',
            title: '结案金额'
        },
        {
            field: 'totalPrice',
            title: '实际保费'
        },
        {
            field: 'claimRate',
            title: '理赔率'
        },
        {
            field: 'operate',
            title: '操作',
            params: {
                buttons: [
                    {
                        hidden: (row: ClaimItemDto) => row.insureTypeName === '团意险',
                        text: '拒保',
                        event: (row) => this.onReject(row)
                    }
                ]
            },
            slots: {
                default: 'buttons'
            }
        }
    ] as TableRenderColumnTypes<ClaimDto>

    async onReject(row: VxeTableDataRow) {
        await confirm(
            `是否拒保${row.companyName}${row.insureTypeName}？`,
            '提示',
            { type: 'error' }
        )
        switch (row.insureTypeName) {
        case '长期保':
            await editPeriodStatus({
                companyId: row.companyId,
                refusalGuaranteeStatus: 1,
                userType: 2
            })
            break
        case '日日保':
            await editWesureStatus({
                companyId: row.companyId,
                refusalGuaranteeStatus: 1,
                blockedAccount: 1
            })
        }
        this.reloadPage()
    }

    getData() {
        this.onPage(1)
    }

    async onExport() {
        const res = await exportClaimDetail({
            companyId: this.companyId
        })
        downloadFile(res)
    }

    async onLoadData(page: number, size: number, filters: AnyObject) {
        if (!this.companyId) return []
        const res = await claimDetail({
            companyId: this.companyId
        })
        const map = {
            periodInsur: '长期保',
            dailyInsur: '日日保',
            tyInsur: '团意险'
        }
        for (const key in map) {
            if (!res[key as keyof typeof map]) {
                res[key as keyof typeof map] = {} as ClaimItemDto
            }
            res[key as keyof typeof map]!.insureTypeName = map[key as keyof typeof map]
            if (res[key as keyof typeof map]!.companyName) {
                this.companyName = res[key as keyof typeof map]!.companyName
            }
        }
        const tableData = Object.values(res)
        return new Promise<any[]>((resolve) => {
            resolve(tableData)
        })
    }

    render() {
        return (
            <Dialog
                v-model:show={this.showDialog}
                title={this.companyName}
                v-slots={{
                    title: () => {
                        return (
                            <div class="flex justify-between">
                                <div>{this.companyName}</div>
                                <Button type="primary" onClick={this.onExport}>
                                    导出列表
                                </Button>
                            </div>
                        )
                    },
                    default: () => {
                        return <>{super.renderTable()}</>
                    }
                }}
            ></Dialog>
        )
    }
}

export default toNative<{ companyId: number }, {}>(DialogClaimRate)
